<template>
  <ActionPanel :loading="loading">
    <div v-if="id && data">
      <div class="font-size-16px font-600 mb2">基本信息</div>
      <el-form ref="formRef" :model="data" :rules="rules" status-icon>
        <el-form-item v-for="(column, i) in cross.columns" :key="i" :label="column.label" :prop="toCamelCase(column.name)">
          <component :is="getElement(column.type, 'write', action.elements?.[column.name]?.element)"
            v-model="data[toCamelCase(column.name)]" :action="action" :column="column"
            v-bind="action.elements?.[column.name]?.elementProps" @keyup.enter="update" />
        </el-form-item>
      </el-form>
      
      <template v-for="(relation, cross) in cross.crosses">
        <UpdateList v-if="relation.type == 'hasMany'" :has-many="relation" :data="data[cross]" />
        <Update v-else :has-one="relation" :data="data[cross]" :column="2" />
      </template>
    </div>
    <ElEmpty v-else description="数据不存在" class="full" />
    <template #footer>
      <el-button type="primary" @click="update">更新</el-button>
      <el-button v-if="close" @click="close">关闭</el-button>
    </template>
  </ActionPanel>
</template>
<script setup lang="ts">
  import { ElButton, ElForm, ElFormItem, FormRules, ElEmpty } from 'element-plus'
  import { detailApi, updateApi } from '@/seed-application/api'
  import { buildDeclared, getCross, getDeclares } from '@/seed-application/utils/SeedUtil'
  import { Update, UpdateList } from '@/components/crud'
  import { inject, onMounted, ref } from 'vue'
  import { toCamelCase } from '@/utils/func'
  import feedback from '@/utils/feedback'
  import { getAction, unitKey } from '@/seed-application'
  import { ActionPanel } from '@/components/ActionPanel'
  import { closePopupKey } from '@/components/Popup'
  import { getElement } from '@/seed-application'
  import { Unit } from '@/seed-application/types'

  const props = defineProps<{ actionName: string, seedName?: string, microName?: string, id: string }>()
  const action = getAction(props.actionName, props.seedName, props.microName)
  const seed = action?.seed

  const close = inject<() => void>(closePopupKey, void 0)
  const unit = inject<Unit>(unitKey, void 0)

  const data = ref()
  const loading = ref(false)
  onMounted(async () => {
    if(props.id) {
      try {
        loading.value = true
        data.value = await detailApi(action, props.id)
      } finally {
        loading.value = false
      }
    }
  })

  const formRef = ref()
  const declared = buildDeclared(seed, getDeclares(action))
  const cross = getCross(seed, declared)
  console.log('update cross', cross)

  const rules: FormRules<Record<string, any>> = {
    name: [
      { required: true, message: 'Please input Activity name', trigger: 'blur' },
      { min: 0, max: 50, message: 'Length should be 0 to 50', trigger: 'blur' },
    ]
  }

  const update = () => {
    formRef.value.validate(async (valid, error) => {
      if(valid) {
        loading.value = true
        await updateApi(action, data.value)
        loading.value = false
        feedback.msgSuccess('更新成功')
        unit?.refresh?.()
        close?.()
      } else {
        // feedback.alertError('11111')
      }
    })
  }
</script>